import React from 'react';
import Sortable from '@timluo465/react-sortablejs';
import './index.less';
import { WeaLocaleProvider } from 'ecCom';
const { getLabel } = WeaLocaleProvider;

export default class Droppable extends React.PureComponent {
  static defaultProps = {
    uuid: '',
    index: 0,
    style: {},
    options: {},
    className: ''
  };

  render() {
    const { 
      uuid, index, style, options, className, children, 
      tipDraggable = false, onChange = () => { } 
    } = this.props;

    if (!tipDraggable) {
      options.draggable = ':not(.wea-edc-drop-tip)';
    }

    return (
      <Sortable ecId={`${this && this.props && this.props.ecId || ''}_Sortable@ujwfp4`}
        style={style}
        className={`wea-edc-droppable ${className}`}
        data-uuid={uuid}
        data-index={index}
        onChange={onChange}
        options={options}
      >
        {children || <span className='wea-edc-drop-tip'>{getLabel('511647','请将左侧插件拖放至此处添加')}</span>}
      </Sortable>
    );
  }
}